<template>
  <FrontSideTable
    dataUrl="/sys/param/getList"
    addUrl="/sys/param/add"
    editUrl="/sys/param/edit"
    deleteUrl="/sys/param/delete"
    tableTitle="参数列表"
    searchHint="根据参数名或值查找"
    :searchProps="searchProps"
    :columns="columns"
    :form="form"
    :rules="rules"
    @beforeAdd="beforeAdd"
    @beforeEdit="beforeEdit"
    @onCreated="onCreated">
    <template slot="form">
      <!---新增或编辑表单-->
      <el-form-item label="参数名" prop="name">
        <el-input v-model="form.name" placeholder="输入参数名称"></el-input>
      </el-form-item>
      <el-form-item label="参数值" prop="value">
        <el-input v-model="form.value" placeholder="输入参数值"></el-input>
      </el-form-item>
      <el-form-item label="备注">
        <el-input type="textarea" v-model="form.notes"></el-input>
      </el-form-item>
    </template>
  </FrontSideTable>
</template>

<script>
  import FrontSideTable from "../../template/FrontSideTable.vue"
  import {clearFields} from "../../../assets/js/utils/ObjectUtils"

  //用于编辑时判断名称是否重复
  let oldName = "";

  export default {
    name:"ParamManagement",
    data() {
      //参数名校验
      let nameValidator = (rule, value, callback)=> {
        if(oldName === value) {
          callback();
        }else {
          if(this.dataList.some(item=>item.name === value)) {
            callback(new Error("参数名重复"));
          }else {
            callback();
          }
        }
      };

      return {
        dataList:[],
        searchProps:["name", "value"],
        columns:[
          {prop:"name", label:"参数名"},
          {prop:"value", label:"参数值"},
          {prop:"notes", label:"备注"}
        ],
        form: {
          name:"",
          value:"",
          notes:""
        },
        rules: {
          name: [
            {required:true, message:"请输入参数名", trigger:"blur"},
            {validator:nameValidator, trigger:"blur"}
          ],
          value: [
            {required:true, message:"请输入参数值", trigger:"blur"}
          ]
        }
      }
    },
    methods: {
      onCreated(dataList) {
        this.dataList = dataList;
      },
      beforeAdd() {
        oldName = "";
        clearFields(this.form);
      },
      beforeEdit(data) {
        oldName = data.name;
        this.form = {...data};
      }
    },
    components:{FrontSideTable}
  }
</script>



// WEBPACK FOOTER //
// ParamManagement.vue?11d404fc